import './ShangPinInfo.scss'
import { useRef, useState } from 'react'
import { useEventEmitter, useMount, useSize } from 'ahooks'
import { Pagination, Button, App, Dropdown } from "antd"
import { imageUrl } from '../../Config/config'
import { useRequest } from 'alova/client'

import { Http } from '../../API'
import { ModelBox } from '../../Model'

import { FileImageOutlined, InfoCircleOutlined, DeleteOutlined } from '@ant-design/icons';


const shopList = [
    { uuid: 1, title: '热敏打印机', type: [1, 3], prick: 540, stock: 44 },
    { uuid: 2, title: '热敏打印机', type: [1, 3], prick: 540, stock: 44 },
    { uuid: 3, title: '热敏打印机', type: [1, 3], prick: 540, stock: 44 },
    { uuid: 4, title: '热敏打印机', type: [1, 3], prick: 540, stock: 44 },
    { uuid: 5, title: '热敏打印机', type: [1, 3], prick: 540, stock: 44 },
    { uuid: 6, title: '热敏打印机', type: [1, 3], prick: 540, stock: 44 },
    { uuid: 7, title: '热敏打印机', type: [1, 3], prick: 540, stock: 44 },
    { uuid: 8, title: '热敏打印机', type: [1, 3], prick: 540, stock: 44 },
    { uuid: 9, title: '热敏打印机', type: [1, 3], prick: 540, stock: 44 },
]

const TypeMapping = {
    设备: { title: '设备', color: 'rgba(239, 122, 89, 0.67)' },
    耗材: { title: '耗材', color: 'rgba(115, 83, 247, 0.67)' },
    其他: { title: '其他', color: 'rgba(22, 119, 255, 0.67)' }
}




const ShangPinInfo = () => {
    const { notification } = App.useApp()
    const CommodityBox = useRef()
    const size = useSize(CommodityBox)
    const [Columns, setColumns] = useState()

    const [Total, setTotal] = useState()
    const [DataList, setDataList] = useState([])

    const { send: getSupp } = useRequest(() => Http({ url: 'getBuySuppliers', params: { pageIndex: 1, pageSize: 10000 } }), { immediate: false })
    const { send: getData } = useRequest(params => Http({ url: 'getBuyProductInfo', params }), { immediate: false })
    const { send: posData } = useRequest(params => Http({ url: 'posBuyProductInfo', params }), { immediate: false })
    const { send: putData } = useRequest(params => Http({ url: 'putBuyProductInfo', params }), { immediate: false })
    const { send: delData } = useRequest(params => Http({ url: 'delBuyProductInfo', params }), { immediate: false })

    const [OptionsCall, setOptionsCall] = useState()
    const ModalEvent = useEventEmitter()
    ModalEvent.useSubscription(val => {
        const { type, data } = val
        if (type === 'Added') {
            posData(data).then(() => {
                onGetData()
                ModalEvent.emit({ type: 'offModal' })
                notification.success({ key: 'success', message: '成功提醒', description: '商品添加成功!数据即将刷新...' })
            })
        }
        if (type === 'Modify') {
            putData(data).then(() => {
                onGetData()
                ModalEvent.emit({ type: 'offModal' })
                notification.success({ key: 'success', message: '成功提醒', description: '商品修改成功!数据即将刷新...' })
            })
        }
        if (type === 'Delete') {
            delData({ uuid: data.uuid }).then(() => {
                onGetData()
                ModalEvent.emit({ type: 'offModal' })
                notification.success({ key: 'success', message: '成功提醒', description: '商品删除成功!数据即将刷新...' })
            })
        }
        if (type === 'Refresh') onGetData()
    })

    // 
    const onAdded = () => setOptionsCall({ type: 'FormAdded', title: '新增商品', data: Columns })

    const onGetData = () => {
        getData().then(res => {
            setTotal(res.total)
            setDataList(res.list)
        })
    }

    useMount(async () => {
        const { list } = await getSupp()
        setColumns([
            {
                dataIndex: 'uuid',
                valueType: 'Hidden',
                hideInSearch: true
            },
            {
                title: '商品名称',
                dataIndex: 'productName',
                valueType: 'Input',
                width: 240,
                align: 'center',
            },
            {
                title: '类别',
                dataIndex: 'category',
                valueType: 'Select',
                valueEnum: [
                    { value: '设备', label: '设备' },
                    { value: '耗材', label: '耗材' },
                    { value: '其他', label: '其他' },
                ],
                width: 240,
                align: 'center',
                hideInSearch: true,
            },
            {
                title: '供应商',
                dataIndex: 'supplierUuid',
                valueType: 'Select',
                valueEnum: list,
                fieldNames: { value: 'uuid', label: 'supplierName' },
                width: 240,
                align: 'center',
            },
            {
                title: '单价',
                dataIndex: 'price',
                valueType: 'InputNumber',
                width: 240,
                align: 'center',
            },
            {
                title: '库存',
                dataIndex: 'stockQuantity',
                valueType: 'InputNumber',
                width: 240,
                align: 'center',
            },
            {
                title: '单位',
                dataIndex: 'unit',
                valueType: 'Input',
                width: 240,
                align: 'center',
            },
            {
                title: '配送服务',
                dataIndex: 'deliveryService',
                valueType: 'Select',
                valueEnum: [{ value: '货到付款', label: '货到付款' }],
                width: 240,
                align: 'center',
                hideInSearch: true,
            },
            {
                title: '规格',
                dataIndex: 'specification',
                valueType: 'Input',
                width: 240,
                align: 'center',
                hideInSearch: true,
            },
            {
                title: '备注',
                dataIndex: 'remark',
                valueType: 'TextArea',
                width: 240,
                align: 'center',
                hideInSearch: true,
            },
        ])
        onGetData()
    })

    const onImage = (uuid) => {
        setOptionsCall({ type: 'ShangPinImage', data: DataList.find(v => v.uuid === uuid), width: 1140 })
    }
    const onModify = (uuid) => {
        setOptionsCall({ type: 'FormModify', title: '商品详情', data: { columns: Columns, item: DataList.find(v => v.uuid === uuid) } })
    }
    const onDelete = (uuid) => {
        setOptionsCall({ type: 'FormDelete', title: '删除警告!', data: DataList.find(v => v.uuid === uuid), width: 600 })
    }

    const items = (uuid) => ([
        { key: '1', label: <Button type='link' onClick={() => onImage(uuid)} ><FileImageOutlined style={{ color: '#13c2c2' }} />商品图片</Button> },
        { key: '2', label: <Button type='link' onClick={() => onModify(uuid)}><InfoCircleOutlined style={{ color: '#13c2c2' }} />商品信息</Button> },
        { key: '3', label: <Button type='link' danger onClick={() => onDelete(uuid)}><DeleteOutlined />删除商品</Button> },
    ])

    return (
        <div className='ShangPinInfo'>
            <div className='Search'>
                <div></div>
                <Button type='primary' onClick={onAdded}>新增商品</Button>
            </div>
            <div className='Commodity' ref={CommodityBox}>
                {size && DataList.map(({ uuid, productName, category, price, unit, stockQuantity, children, supplierName }) =>
                    <Dropdown key={uuid} menu={{ items: items(uuid) }} trigger={['contextMenu']}>
                        <div style={{ height: size.height / 2 }}>
                            <div className='CommodityDefault'>
                                <div>
                                    {children && children.length !== 0 ?
                                        <img src={children[0].url} alt="" /> :
                                        <img src={imageUrl + 'Back.png'} alt="" />
                                    }
                                </div>
                                <div>
                                    <div>{productName}</div>
                                    <div>
                                        <div style={{ background: TypeMapping[category]?.color || '#262626' }}>
                                            {TypeMapping[category]?.title || '未知类型'}
                                        </div>
                                    </div>
                                    <div>
                                        <div><span>¥</span>{price}<span>/{unit}</span></div>
                                        <div>库存 : {stockQuantity}</div>
                                    </div>
                                    <div>由 {supplierName} 提供</div>
                                </div>
                            </div>
                        </div>
                    </Dropdown>
                )}
            </div>
            {Total / 10 > 1 &&
                <div className='Pagination'>
                    <Pagination defaultCurrent={1} total={50} />
                </div>
            }
            <ModelBox OptionsCall={OptionsCall} ModalEvent={ModalEvent} />
        </div>
    );
};

export default ShangPinInfo;